<template>
  <el-main class="main">
    <div class="main-header">
      <div class="header-search">
        <span style="margin-right: 10px">请选择体检项目:</span>

        <el-select
          v-model="input"
          class="m-2"
          style="width: 240px"
          placeholder="请选择体检项目"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        
        <span style="margin-left: 10px">症状:</span>

          <el-select
            v-model="input2"
            class="m-2"
            style="width: 240px ;"
            placeholder="请选择症状"
          >
            <el-option
              v-for="item in results"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <span>
          <el-button type="primary" style="margin-left: 15px" @click="searchData"
            >搜索</el-button
          >
          <el-button type="primary" style="margin-left: 15px" @click="resetSearch"
            >清空</el-button
          >
          <el-button type="primary" style="margin-left: 15px" @click="addPEPM"
            >添加信息</el-button
          >
        </span>
      </div>
    </div>
    <div class="main-body">
      <el-row>
        <el-col :span="24">
          <el-table
            :data="userList"
            v-loading="loading"
            style="width: 100%"
          >
            <el-table-column width="50" style="text-align: center"/>
            <el-table-column label="症状id" prop="rpId" style="text-align: center" />
            <el-table-column width="50" style="text-align: center"/>
            <el-table-column label="体检项目" prop="project" style="text-align: center" />
            <el-table-column width="50" style="text-align: center"/>
            <el-table-column label="症状名称" prop="result" style="text-align: center" />
            <el-table-column
              label="操作"
              style="text-align: center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template #default="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  @click="updatePEP(row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  @click="deletePEP(row.rpId)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
     
        </el-col>
      </el-row>
    </div>

            
        <el-dialog v-model="updatePEPdialogVisible" title="修改体检/症状信息">
          <el-form v-model="form" @submit.prevent="savePEP" label-width="100">
            <el-form-item label="项目/症状ID" prop="rpId">
              <el-input v-model="form.rpId" readonly></el-input>
            </el-form-item>
            <el-form-item label="体检项目" prop="project">
              <el-input v-model="form.project"></el-input>
            </el-form-item>
            <el-form-item label="症状名称" prop="result">
              <el-input v-model="form.result"></el-input>
            </el-form-item>
            <el-button type="primary" native-type="submit">保存</el-button>
          </el-form>
        </el-dialog>

        <el-dialog v-model="NewdialogVisible" title="新增项目/症状信息"  label-width="100">
            <el-form v-model="form" @submit.prevent="addPEP">
      
              <el-form-item label="项目/症状ID" prop="rpId">
                    <el-input v-model="form.rpId" ></el-input>
                </el-form-item>
                <el-form-item label="体检项目" prop="project">
                    <el-input v-model="form.project"></el-input>
                </el-form-item>
                <el-form-item label="症状名称" prop="result">
                    <el-input v-model="form.result"></el-input>
                </el-form-item>

                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form>
        </el-dialog>
    
  </el-main>
</template>

<script setup>
import { ref, onMounted,watch, reactive} from "vue";
import axios from "axios";
import { ElMessageBox, ElMessage } from 'element-plus';


const input = ref();
const options = ref();
const allres = ref();
const userList = ref([]);
const results = ref();
const input2 = ref();

onMounted(() => {
  axios
    .get(`/api/ResultProject/projects`)
    .then((result) => {
      options.value =  result.data.data;
      console.log(result.data.data)
    })
    .catch((err) => {});
}
);
onMounted(() =>{
  axios
    .get(`/api/ResultProject/queryAll`)
    .then((result) => {
      allres.value =  result.data.data;
    })
    .catch((err) => {});
})

const searchData = ()=>{
  userList.value = [];
  axios.get(`/api/ResultProject/queryOne?result=${input2.value}`).then((result) => {
    userList.value = result.data.data;
  }).catch((err) => {
    
  });
};

const searchResult = () => {
  userList.value = [];
  axios.get(`/api/ResultProject/queryResult?project=${input.value}`).then((result) => {
    results.value = result.data.data;
  }).catch((err) => {
    
  });
};
watch (input ,()=>{
  searchResult();
});


const resetSearch = () => {
  userList.value=[];
  input.value = "";
  input2.value = "";
};

const form = reactive({
    rpId: '',
    project: '',
    result: ''

});



//删除体检/症状
const deletePEP = (rpId) => {
  ElMessageBox.confirm(
    '是否删除这条信息?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    // 用户点击了确定按钮
    axios.post(`/api/ResultProject/delete?rpId=${rpId}`).then((res) => {
      console.log("成功删除体检/症状", rpId);
      ElMessage.success('删除体检/症状成功');
      // 重新获取数据
      resetSearch();
    }).catch((error) => {
      console.error("删除体检/症状失败", error);
      ElMessage.error('删除体检/症状失败');
    });
  })
  .catch(() => {
    // 用户点击了取消按钮
    ElMessage.info('已取消删除');
  });
};
 // 对话框的可见性
const updatePEPdialogVisible = ref(false);
const NewdialogVisible = ref(false);


const updatePEP = (row) => {
  updatePEPdialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
    console.log('修改体检/症状信息', row);
    console.log(row.rpId)
    form.rpId= row.rpId;
    form.project = row.project;
    form.result = row.result;
    console.log(updatePEPdialogVisible.value);
};
//添加体检/症状信息显示框
const addPEPM = () => {
  NewdialogVisible.value = true; // 在点击修改按钮时将dialogVisible的值改为true
    console.log(NewdialogVisible.value);
};
//保存
const savePEP = (row) => {
      console.log('提交表单', form);
      axios.post(`/api/ResultProject/update`,form)
    .then(response => {

      console.log('保存成功', response.data);
      ElMessage.success('保存成功');
      updatePEPdialogVisible.value = false;
      form.rpId = row.rpId;
      form.project = row.project;
      form.result = row.result;
      window.location.reload();
    })
    .catch(() => {
      ElMessage.error('保存失败');
      form.rpId = '';
      form.project = '';
      form.result = '';
  });
    
}
const addPEP = (row) => {
   
   console.log('提交表单', row);
   axios.post(`/api/ResultProject/add`, form)
 .then(response => {
   // 保存成功的处理逻辑
   console.log('保存成功', response.data);
   ElMessage.success('添加成功');
   // 关闭弹窗
   NewdialogVisible.value = false;

   window.location.reload();
    form.rpId = row.rpId;
    form.project = row.project;
    form.result = row.result;
      // selectPEP();
 })
 .catch(() => {
      ElMessage.error('添加失败');
      form.rpId = '';
      form.project = '';
      form.result = '';
  });
}

</script>

<style lang="scss">
.main {
  height: 100%;
  background-color: rgb(250, 252, 253);

  .main-body {
    margin-top: 14px;
    border-radius: 10px;
    height: calc(86vh - 100px);
    background-color: rgb(255, 255, 255);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .main-header {
    height: 80px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    background-color: rgb(255, 255, 255);
    
    .header-search {
      padding: 10px 0 0 10px;
      margin-top: auto;
      margin-bottom: auto ;
      margin-left: 15px;
     position: relative;
     top: 12px;
    }
  }
}
</style>
